<script setup lang="ts">
const list = reactive([
  {
    title: '自选组合1',
    path: '1333',
    // 以下是额外属性
    extraProperties: '测试',
    value: '测试',
    obj: {
      a: 1,
      b: [1, 2, 3]
    }
  },
  {
    title: '自选组合2',
    path: '1412'
  },
  {
    title: '自选组合3',
    path: '1999'
  }
]);

function dragEnd (oldIndex, newIndex) {
  const currentTab = list[oldIndex];
  list.splice(oldIndex, 1);
  list.splice(newIndex, 0, currentTab);
  // console.log(oldIndex, newIndex, list);
}

function deleteItem (index) {
  list.splice(index, 1);
}

let infos = ref({

});

function handleClick (item, index) {
  console.log(item, index);
}

let value = $ref();
</script>

<template>
  <vc-side-menu
    defaultActive="1412"
    :dragOption="{
       dragClassName: 'test',
       handle: '.drag-icon',
       filter: '.is-disabled'
    }"
    :useMenuSelect="false"
    @dragEnd="dragEnd"
    showCollapse
    :width="300" :menus="list" :menuTopBottomHeight="70">
    <template #top>
      <div class="h-70px flex align-center ml-12px">
        <el-input v-model="value" />
      </div>
    </template>
    <template #menuItem="{item, index}">
      <div @click="handleClick(item, index)"
        :class="['flex justify-between w-full', {'pointer-events-none': item.disabled}]">
        <div class="flex">
          图标
          <span class="ml-10px max-w-100px">{{ item.title }}</span>
        </div>
        <div class="flex align-center">
          <el-button size="small" class="pointer-events-auto" @click="deleteItem(index)">删除
          </el-button>
          <span class="drag-icon">排序</span>
        </div>
      </div>
    </template>
  </vc-side-menu>
  <div class="ml-300px">
    
    <el-input v-model="value"/>
  </div>
</template>

